<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>dom-insertion Test</title>
</head>
<body>
<script src="../test/test.js"></script>
<script>
    KISSY.Test.Config.times = 1;
</script>

<h2>Test Data</h2>

<script src="../../build/seed/seed-pkg.js"></script>
<script src="../../build/ua/ua-pkg.js"></script>

<script src="dom.js"></script>
<script src="selector.js"></script>
<script src="dom-data.js"></script>
<script src="dom-class.js"></script>
<script src="dom-attr.js"></script>
<script src="dom-traversal.js"></script>
<script src="dom-create.js"></script>
<script src="dom-insertion.js"></script>

<script src="../../build/sizzle/sizzle-pkg.js"></script>

<div id="test-data">
    <p id="foo">
        <a href="../kissy/" style="color:red" class="link" title="test" data-test="test">test link</a>
        <input type="text" id="test-input" readonly maxlength="20" value="hello"/>
        <input type="radio" id="test-radio" />
        <input type="radio" id="test-radio2" checked />
        <label class="test" for="test-input">label</label>
        <button type="button" tabindex="3">Submit</button>
        <textarea rows="2" cols="2">
            test
        </textarea>
    </p>
    <div id="test-div"></div>
    <table id="test-table" cellspacing="10">
        <tbody>
        <tr>
            <td rowspan="2" colspan="3">td</td>
        </tr>
        </tbody>
    </table>
    <select id="test-select">
        <option id="test-opt" value="1">0</option>
        <option>2</option>
        <option>3</option>
    </select>
    <select id="test-select2">
        <option>2</option>
    </select>
    <select id="test-select3" multiple autocomplete="off">
        <option selected>1</option>
        <option selected>2</option>
        <option>3</option>
    </select>
    <div id="test-insert" class="test-parent">
        <p id="test-next"><a>1</a></p>
        <p class="test-next-p"><a class="test-a">2</a></p>
        <p class="test-next"><a id="test-parent3">3</a></p>
        <p class="test-p" id="test-prev"><em class="test-em"><span><a id="test-parent4">4</a></span></em></p>
    </div>
    <div id="test-append"></div>
    <div id="test-prepend">text node</div>
</div>

<!-- Test Cases -->
<script>
    var S = KISSY, DOM = S.DOM;

    function test_insertBefore(test) {
        var t = DOM.insertBefore(DOM.create('<p>inserted node</p>'), '#test-next');
        if(DOM.children('#test-insert').length !== 5) test.fail();
        S.get('#test-insert').removeChild(t);
    }

    function test_insertAfter(test) {
        var t = DOM.insertAfter(DOM.create('<p class="test-insert">inserted node2</p>'), '#test-next');
        if(DOM.children('#test-insert')[1].className !== 'test-insert') test.fail();
        S.get('#test-insert').removeChild(t);
    }

    function test_append(test) {
        DOM.append(DOM.create('<p>'), '#test-append');
        if(DOM.children('#test-append').length !== 1) test.fail();
    }
    
    function test_prepend(test) {
        DOM.prepend(DOM.create('<p>'), '#test-prepend');
        if(DOM.children('#test-prepend').length !== 1) test.fail();

        DOM.prepend(DOM.create('<a>'), '#test-prepend');
        if(DOM.children('#test-prepend')[0].nodeName !== 'A') test.fail();
    }

    // temp code

</script>

</body>
</html>
